<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
        <script src="../../../../libs/layui/layui.js"></script>
        <link rel="stylesheet" href="../../../../libs/layui/css/layui.css" />
        <title>Layui - 下拉选择 (v2.6.8)</title>
    </head>
    <body style="padding: 15px">
        <div class="layui-form">
            <div class="layui-inline">
                <select name="city" lay-verify="required">
                    <option value="">请选择一个城市</option>
                    <option value="010">北京</option>
                    <option value="021">上海</option>
                    <option value="0571">杭州</option>
                </select>
                <div class="layui-unselect layui-form-select">
                    <div class="layui-select-title"><input type="text" placeholder="请选择一个城市" value="" readonly="" class="layui-input layui-unselect" /><i class="layui-edge"></i></div>
                    <dl class="layui-anim layui-anim-upbit">
                        <dd lay-value="" class="layui-select-tips">请选择一个城市</dd>
                        <dd lay-value="010" class="">北京</dd>
                        <dd lay-value="021" class="">上海</dd>
                        <dd lay-value="0571" class="">杭州</dd>
                    </dl>
                </div>
            </div>
            <div class="layui-inline">
                <select name="city" lay-verify="required">
                    <option value="">请选择一个城市</option>
                    <option value="010">北京</option>
                    <option value="021" disabled="">上海（禁用效果）</option>
                    <option value="0571" selected="">杭州</option>
                </select>
                <div class="layui-unselect layui-form-select">
                    <div class="layui-select-title"><input type="text" placeholder="请选择一个城市" value="杭州" readonly="" class="layui-input layui-unselect" /><i class="layui-edge"></i></div>
                    <dl class="layui-anim layui-anim-upbit">
                        <dd lay-value="" class="layui-select-tips">请选择一个城市</dd>
                        <dd lay-value="010" class="">北京</dd>
                        <dd lay-value="021" class="layui-disabled">上海（禁用效果）</dd>
                        <dd lay-value="0571" class="layui-this">杭州</dd>
                    </dl>
                </div>
            </div>
            <div class="layui-inline">
                <select name="quiz">
                    <option value="">select分组</option>
                    <optgroup label="城市记忆">
                        <option value="你工作的第一个城市">你工作的第一个城市？</option>
                    </optgroup>
                    <optgroup label="学生时代">
                        <option value="你的工号">你的工号？</option>
                        <option value="你最喜欢的老师">你最喜欢的老师？</option>
                    </optgroup>
                </select>
                <div class="layui-unselect layui-form-select">
                    <div class="layui-select-title"><input type="text" placeholder="select分组" value="" readonly="" class="layui-input layui-unselect" /><i class="layui-edge"></i></div>
                    <dl class="layui-anim layui-anim-upbit layui-select-group">
                        <dd lay-value="" class="layui-select-tips">select分组</dd>
                        <dt>城市记忆</dt>
                        <dd lay-value="你工作的第一个城市" class="">你工作的第一个城市？</dd>
                        <dt>学生时代</dt>
                        <dd lay-value="你的工号" class="">你的工号？</dd>
                        <dd lay-value="你最喜欢的老师" class="">你最喜欢的老师？</dd>
                    </dl>
                </div>
            </div>
            <div class="layui-inline">
                <select name="city" lay-verify="required" lay-search="">
                    <option value="">带搜索的选择框</option>
                    <option value="1">layer</option>
                    <option value="2">form</option>
                    <option value="3">layim</option>
                    <option value="4">element</option>
                    <option value="5">laytpl</option>
                    <option value="6">upload</option>
                    <option value="7">laydate</option>
                    <option value="8">laypage</option>
                    <option value="9">flow</option>
                    <option value="10">util</option>
                    <option value="11">code</option>
                    <option value="12">tree</option>
                    <option value="13">layedit</option>
                    <option value="14">nav</option>
                    <option value="15">tab</option>
                    <option value="16">table</option>
                    <option value="17">select</option>
                    <option value="18">checkbox</option>
                    <option value="19">switch</option>
                    <option value="20">radio</option>
                </select>
                <div class="layui-form-select">
                    <div class="layui-select-title"><input type="text" placeholder="带搜索的选择框" value="" class="layui-input" /><i class="layui-edge"></i></div>
                    <dl class="layui-anim layui-anim-upbit">
                        <dd lay-value="" class="layui-select-tips">带搜索的选择框</dd>
                        <dd lay-value="1" class="">layer</dd>
                        <dd lay-value="2" class="">form</dd>
                        <dd lay-value="3" class="">layim</dd>
                        <dd lay-value="4" class="">element</dd>
                        <dd lay-value="5" class="">laytpl</dd>
                        <dd lay-value="6" class="">upload</dd>
                        <dd lay-value="7" class="">laydate</dd>
                        <dd lay-value="8" class="">laypage</dd>
                        <dd lay-value="9" class="">flow</dd>
                        <dd lay-value="10" class="">util</dd>
                        <dd lay-value="11" class="">code</dd>
                        <dd lay-value="12" class="">tree</dd>
                        <dd lay-value="13" class="">layedit</dd>
                        <dd lay-value="14" class="">nav</dd>
                        <dd lay-value="15" class="">tab</dd>
                        <dd lay-value="16" class="">table</dd>
                        <dd lay-value="17" class="">select</dd>
                        <dd lay-value="18" class="">checkbox</dd>
                        <dd lay-value="19" class="">switch</dd>
                        <dd lay-value="20" class="">radio</dd>
                    </dl>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            layui.use("form", function () {
                var form = layui.form;

                //监听提交
                form.on("submit(formDemo)", function (data) {
                    layer.msg(JSON.stringify(data.field));
                    return false;
                });
            });
        </script>
    </body>
</html>
